﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GridInGrid.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="<%= ResolveClientUrl("~/scripts/jquery-1.5.1.min.js") %>"></script>
     <script type="text/javascript">

         $(document).ready(function () {
             AttachClickEventOnHyperlinks();
         });

         function AttachClickEventOnHyperlinks() {
             $('.toggler').click(onClick);
         }

         function onClick() {
             var ProductsPanel = "#divProducts" + this.id;
             $(ProductsPanel).toggle(onToggle(this.id));


         }

         function onToggle(id) {
             var expander = "#imgdiv" + id;
             var ProductsPanel = "#divProducts" + id;
             if ($(ProductsPanel).css('display') == 'none') {
                 $(expander).attr('src', "./img/collapse.gif");
             }
             else {
                 $(expander).attr('src', "./img/expand.gif");
             }
         }
    
        
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
            onrowdatabound="GridView1_RowDataBound">

        <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <a id='<%# Eval("Name") %>' class="toggler" href="#">
                            <img id="imgdiv<%# Eval("Name") %>" alt="Click to show/hide details" border="0"
                                src="<%= ResolveClientUrl("~/Img/expand.gif") %>" />
                        </a>
                    </ItemTemplate>
                </asp:TemplateField>
              
                <asp:BoundField HeaderText="Description" DataField="Description"  />

                 <asp:TemplateField>
                    <ItemTemplate>
                     
                        <tr>
                            <td colspan="100%">
                                <div id="divProducts<%# Eval("Name") %>" style="display: none; position: relative;
                                    left: 25px;">
                                      <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" >
                                      <Columns>
                                       <asp:BoundField HeaderText="Name" DataField="Name"  />
                                       <asp:BoundField HeaderText="Description" DataField="Description"  />
                                      </Columns>
                                      </asp:GridView>
                                </div>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:TemplateField>
                </Columns>
        </asp:GridView>
    
    </div>
    </form>
</body>
</html>
